@colorPrimary : #161e2f;
@colorSuccess : #03b383;
@colorWarning : #ff4f4f;
@colorDanger : #ffbc5a;
@color-text-primary : #333;
@color-text-regular : #666;
@color-text-secondary : #999;
@color-text-primary : #333;
@background-color-base: #f3f3f3;
@colorAside : #161e2f;
@colorNav : #3a4c5d;
@colorNavActive : #0096ff;
@headHeight : 40px;
@avatarHeight : 40px;
@asideWidth : 180px;

/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {
  width: 15px; /*对垂直流动条有效*/
  height: 15px; /*对水平流动条有效*/
  }

  /*定义滚动条的轨道颜色、内阴影及圆角*/
  ::-webkit-scrollbar-track{
  // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
  background-color: #dcdcdc;
  border-radius: 2px;
  }


  /*定义滑块颜色、内阴影及圆角*/
  ::-webkit-scrollbar-thumb{
  border-radius: 2px;
  // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
  background-color: #a8bdcc;
  }

  /*定义两端按钮的样式*/
  ::-webkit-scrollbar-button {
    display: none;
  background-color:cyan;
  }

  /*定义右下角汇合处的样式*/
  ::-webkit-scrollbar-corner {
  background:khaki;
  }

.shadow {
    box-shadow: 5px 5px 15px #ccc;
}

.dib {
    display: inline-block;
    vertical-align: top;
}

.tac {
    text-align: center;
}

.mb10 {
    margin-bottom: 10px;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

html,
body,
#app,
.framework,
.h100 {
    height: 100%;
}

.p15 {
    padding: 15px;
}

.clear {
    clear: both;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}

.el-header {
    background-color: @colorPrimary;
    line-height: @headHeight  !important;
    height: @headHeight  !important;
    display: flex;
    justify-content: space-between;

    .logo {
        color: #fff;
        font-size: 20px;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .headerMain {
        flex-grow: 1;
        flex-shrink: 1;

        .topNav {
            padding-left: 40px;
            float: left;

            ul {
                float: left;

                li {
                    float: left;
                    padding: 0 20px;
                    color: #ddd;
                    cursor: pointer;

                    &.on {
                        color: #fff;
                    }
                }

            }

            div {
                display: none;
            }

            &.vertical {
                float: right;
                position: relative;
                padding-right: 20px;
                padding-left: 20px;

                div {
                    float: right;
                    display: block;
                    color: #fff;
                    line-height: 40px;
                    height: 40px;
                    padding: (@headHeight - @avatarHeight)/2 0;
                    cursor: pointer;

                    i {
                        font-size: 24px;
                        line-height: 40px;
                        vertical-align: top;
                    }

                    span {
                        line-height: 40px;
                        vertical-align: top;
                    }
                }

                ul {
                    position: absolute;
                    top: 60px;
                    left: -12px;
                    width: 120px;
                    background: #fff;
                    text-align: center;
                    display: none;
                    z-index: 999;
                    .shadow();

                    *::after {
                        content: '';
                        border: solid 6px transparent;
                        border-bottom-color: #fff;
                        position: absolute;
                        top: -12px;
                        left: 50px;
                    }

                    li {
                        float: none;
                        color: #333;
                    }
                }

                &:hover {
                    ul {
                        display: block;
                    }
                }
            }
        }
    }

    .navBtn {
        float: right;
        height: 40px;
        line-height: 40px;
        padding-top: (@headHeight - @avatarHeight)/2;
        flex-grow: 0;
        flex-shrink: 0;

        i {
            font-size: 24px;
            color: #fff;
            line-height: 40px;
            vertical-align: top;
            padding: 0 10px;
        }

        span {
            line-height: 40px;
            height: 40px;
            display: inline-block;
            vertical-align: top;
            color: #fff;
            margin-left: 10px;
            font-size: 14px;
        }

        .el-avatar {
            margin-left: 15px;
        }
    }
}

.noHead {
    height: calc(100% - @headHeight);
}

// 侧边导航开始
.el-aside {
    background-color: @colorAside;
    // width: @asideWidth  !important;

    &.hide {
        width: 0px !important;
    }

    .el-menu {
        // width: @asideWidth;
        overflow: hidden;
        border: 0;

        .el-menu-item.is-active {
            background-color: @colorNavActive  !important;
            color: #fff;
            position: relative;

            &::after {
                content: '';
                border-top: solid 10px @background-color-base;
                border-right: solid 10px transparent;
                border-left: solid 10px transparent;
                position: absolute;
                right: -5px;
                top: 50%;
                transform: rotate(90deg);
                margin-top: -5px;
            }
        }

        // .el-submenu__title span {
        //     padding-left: 30px;
        // }

        // .el-submenu__icon-arrow {
        //     right    : auto;
        //     left     : 20px;
        //     font-size: 18px;
        // }

        .el-menu-item {
            background-color: @colorAside  !important;
            min-width: 180px;
        }
    }
}

// 侧边导航结束

.breadcrumb {
    background: #fff;
    height: 32px;
    position: relative;
    line-height: 32px;
    padding-left: 10px;

    i.el-icon-caret-left {
        font-size: 18px;
        float: left;
        line-height: 32px;
        padding-left: 5px;
        color: @colorPrimary;
        cursor: pointer;
    }

    .el-breadcrumb {
        line-height: 32px;
    }

    a {
        color: #666;
    }

}

.el-main {
    padding: 0;
    background: @background-color-base;

    .p15 {
        height: calc(100% - 35px);
    }
}

.p20 {
    padding: 20px;
    text-align: center;
}

.panel {
    padding: 20px;
    background: #fff;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 2px #c5c5c5;
    &>div{ height: 100%;}
}

#index {
    display: flex;

    dl {
        width: 33%;
        text-align: center;

        dt {
            line-height: 100px;
            font-weight: bold;
            font-size: 18px;
        }

        dd {
            margin-bottom: 15px;

            .el-button {
                width: 190px;
            }
        }
    }
}

//业务区搜索
.search {
    position: relative;
    min-height: 32px;

    &>.el-input {
        display: inline-block;
        width: 200px;
        vertical-align: top;
    }

    &>span {
        width: 84px;
        display: inline-block;
        text-align: right;
        font-size: 14px;
        color: #999;
        vertical-align: middle;
    }

    .bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.001;
        z-index: 899;
    }

    .searchBar {
        position: absolute;
        z-index: 999;
        background-color: #fff;
        max-height: 32px;
        overflow: hidden;
        transition: all 0.3s;
        padding: 0 10px;

        i {
            transform: rotate(0deg);
            transition: all 0.3s;
        }

        &.on {
            box-shadow: 0px 4px 6px #ddd;
            max-height: 540px;

            i {
                transform: rotate(90deg);
            }
        }

        .poa {
            position: absolute;
            right: 0;
            top: 0;

            .el-button {
                display: inline-block;
                vertical-align: top;
            }

            .search-more-fold {
                display: inline-block;
                width: 24px;
                height: 24px;
                text-align: center;
                margin-top: 2px;
                margin-right: 6px;
                cursor: pointer;
                background-color: #F9F9F9;
                border: 1px solid #dcdfe6;
                line-height: 24px;
                border-radius: 4px;
                color: #333;

                &:hover {
                    border-color: #ccc;

                }
            }
        }

        ul {
            li {
                display: inline-block;
                min-width: 220px;
                width: 22%;
                margin-bottom: 15px;

                &>span {
                    width: 84px;
                    display: inline-block;
                    text-align: right;
                    font-size: 14px;
                    color: #999;
                    vertical-align: middle;
                }

                &>div {
                    width: calc(100% - 93px);
                }
            }
        }
    }
}

.search.zk .searchBar {
    max-height: 600px;
    position: relative;
}

.search.f4 .searchBar {
    padding: 0;
    width: 100%;

    ul li {
        width: auto;
        min-width: 170px;

        &>span {
            width: auto;
            padding-left: 15px;
        }

        &>div {
            width: calc((100vw - 210px) / 4 - 140px);
            vertical-align: top;
            max-width: 320px;

            &.medium {
                width: calc((100vw - 210px) / 2 - 230px);
            }
        }
    }
}

.search.zs .searchBar {
    max-height: initial;
    position: relative;
}

// 页面顶部搜索条件样式
.topSearch {
    .leftBox {
        float: left;max-width: 100%; overflow: hidden; overflow-x: auto;
        .searchbox {
            margin: 0 10px 10px 0;
            display: inline-block;

            em {
                font-size: 14px;
                color: #666;
            }
        }
    }

    .rightBox {
        float: right;
        max-width: 30%;
         text-align: center;
    }
}

// 页面内容
.contentBox {
    background: #ffffff; height: 94%;
}

// 弹层最好高度
.layerMaxHeight {
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
}

//弹层备注样式
.Explain {
    background: #f5ecbf;
    padding: 10px;
    line-height: 1.8em;
    margin: 10px 0 0;
    border-radius: 3px;
    font-size: 14px;
    color: #8a7306;
}

// 内容活或详情页面样式
.InsidePages {
    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #eaeaea;
        font-size: 16px;
        font-weight: normal;
        color: #0096ff;
    }

    .content {
        padding: 20px 0 0;

        .PriceList {
            .head {
                display: flex;

                div {
                    flex: 1;
                    text-align: center;
                    line-height: 1.5em;
                    border: 1px solid #eaeaea;
                    margin: -1px 0 0 -1px;
                    min-height: 40px;

                    span {
                        padding: 5px 0;
                        display: block;
                    }

                }

                .rightcon {
                    div {
                        display: flex;

                        span {
                            flex: 1;
                            border-left: 1px solid #eaeaea;
                            margin: 0 0 0 -1px;
                        }
                    }
                }
            }

            .body {
                div {
                    display: flex;
                    text-align: center;

                    span {
                        flex: 1;
                        display: block;
                        border: 1px solid #eaeaea;
                        margin: -1px 0 0 -1px;
                        box-sizing: border-box;
                        padding: 5px;
                    }
                }
            }

        }
    }

    .bts {
        text-align: center;
        padding: 10px 0;
    }
}

// 设置样式
.setBox {
    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #eaeaea;
        font-size: 16px;
        font-weight: normal;
        color: #0096ff;
    }

    .setContent {
        dl {
            float: left;
            box-shadow: 0 1px 2px #c5c5c5;
            margin: 20px 10px 0;
            width: 250px;

            &:hover {
                box-shadow: 0 2px 3px #c5c5c5;
            }

            dt {
                height: 80px;
                text-align: center;

                span {
                    padding: 10px 0;
                    display: block;
                    font-size: 15px;
                }
            }

            dd {
                padding: 10px;
            }
        }

        .bts {
            text-align: center;
            padding: 20px 0;
        }
    }

    .explainBox {
        .explainBoxN {
            div {
                padding: 5px 0;

                span {
                    margin: 0 10px 0 0;
                }
            }
        }
    }

    .termBox {
        float: left;
        margin: 20px 10px 0 0;
        width: 322px;
        font-size: 0;
    }

    .sealList {
        div.sealBox {
            display: inline-block;
            width: 160px;
            overflow: hidden;
            text-align: center;
            margin: 0 20px 0 0;

            h5 {
                font-weight: normal;
                line-height: 1.5em;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size: 14px;
                padding: 10px 0;
                color: #0096ff;
            }

            .imgbox {
                width: 160px;
                height: 160px;
                position: relative;
                box-sizing: border-box;
                border: 1px dashed #dedede;
                border-radius: 5px;

                &:hover {
                    border: 1px solid #dedede;
                }

                img {
                    position: absolute;
                    max-width: 100%;
                    max-height: 100%;
                }

                input {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    opacity: 0;
                    cursor: pointer;
                }

                i {
                    font-size: 26px;
                    width: 26px;
                    height: 26px;
                    position: absolute;
                    display: inline-block;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    color: #999;
                }
            }
        }
    }
}

// 伪表格
.fakeTable {
  overflow: hidden; overflow-x: auto; white-space: nowrap; padding: 1px;
    .top {
        // display: flex;
        font-size: 0;
        .topBox {
            // flex: 1;
            // display: flex;
            display:inline-block;
            height: 40px;
            line-height: 40px;
            span {
                display: inline-block;
                // flex: 1;
                width: 120px;
                font-size: 14px;
                height: 40px;
                line-height: 40px;
                box-sizing: border-box;
                padding: 0 10px;
                margin: -1px 0 0 -1px;
                border: 1px solid #eaeaea;
                color: #333;
                text-align: center;
                background: #f5f5f5;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }

    .bodyBox {
      margin: -1px 0 0;
        .title{
          float: left; font-size: 14px; width: 120px; white-space: normal; padding: 0 5px; box-sizing: border-box; border: 1px solid #eaeaea; margin: -1px 0 0 -1px;
          em{ display: inline-block;}
        }
        .message{
          div {
              // display: flex;
              font-size: 0;
              em {
                  display: inline-block;
                  // flex: 1;
                  font-size: 14px;
                  width: 120px;
                  height: 40px;
                  line-height: 40px;
                  box-sizing: border-box;
                  padding: 0 10px;
                  margin: -1px 0 0 -1px;
                  border: 1px solid #eaeaea;
                  color: #666666;
                  white-space: nowrap;
                  text-align:center;
                  overflow: hidden;
                  text-overflow: ellipsis;
              }
          }
        }
    }
}

// 分页
.paging{
  padding: 10px 0; text-align: center;
}

.baseMessage{
  padding: 10px 0 30px; text-align: center;
  ul{
    li{ display: inline-block; padding: 0 20px;}
  }
}

// 弹层样式
.layerBox {
    .addBox {
        padding: 10px 0 0;
    }
    .tableStyleW{ width:98%; overflow: hidden; overflow-x: auto; margin: 0 auto 10px;  padding: 10px; box-sizing: border-box; text-align: center;}
    .imgBoxList{
      .imgBox{ position: relative; width: 100px; height: 100px; display: inline-block; background: rgba(0,0,0,.6); margin:0 1px 1px 0;
        img{ position: absolute; max-width: 100%; max-height: 100%; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
      }
    }
    .baseMessage{
      padding: 10px 0;
      ul{
        li{
           display: inline-block; padding: 0 20px; font-size: 15px; font-weight: bold; color:#5fa3e8;
           em{ font-size: 14px; font-weight: normal; color: #999;}
          }

      }
    }
    .payListBox{
      display: flex; width: 100%; overflow: hidden; overflow-x: auto; padding: 0 1px 7px; margin: 0 10px 0 0; box-sizing: border-box;
      dl{
        display: inline-block; width: 25%; flex: 1; text-align: center; box-sizing: border-box; margin:0 0 0 -1px;
        dt{border: 1px solid #eaeaea; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
        dd{border: 1px solid #eaeaea; padding: 5px; margin:-1px 0 0 0; white-space: nowrap;}
      }
    }
    .layerDetailedList{
      dl{
        display:inline-block; text-align: center; min-width: 120px;
        dt{ border:1px solid #eaeaea; height: 40px; line-height:40px; margin:0 0 0 -1px; color: #333; padding: 0 10px;}
        dd{ border:1px solid #eaeaea; height: 40px; line-height:40px; margin: -1px 0 0 -1px; color: #666;}
      }
    }
    .bts {
        text-align: center;
        padding: 10px 0;
    }
}


@fontKaiti:"楷体","楷体_GB2312";

// 发票内容
.invoice{
  background: #FFF; border: 1px solid #e0e0e0; box-shadow: 0 2px 3px #c5c5c5; width: 1200px; margin: 0 auto; padding: 20px 40px; box-sizing: border-box;
  .imgBox{height: 0; text-align: right;}
  .imgBox img{ width: 120px; display: inline-block; margin:-120px -20px 0 0;}
  .invoiceTop{
    h3{
      font-size:30px; font-weight: bold; font-family: @fontKaiti; height: 55px; line-height: 55px; position: relative; text-align: center;
      .logo{
        position: absolute; left: 0; top: 0;
        img{width: 200px;}
      }
      em{ color: #F30; margin:0 -340px 0 230px; display: inline-block; font-size: 16px;}
    }
    p{
      padding: 10px 0 5px;
      span{
        font-family: @fontKaiti; font-size: 18px; margin: 0 55px 0 0;
        em{font-family: @fontKaiti; font-size: 18px;}
        &:last-child{margin: 0;}
      }
    }
  }
  .invoiceCenter{
    .fakeTable{
      border: 1px solid #000;
      .fakeTableHeader{
        display: flex;
        div{
          flex: 1; border:1px solid #000; margin: -1px 0 -1px -1px; text-align: center; box-sizing: border-box;
          &:last-child{ border-right: none;}
          em{display: block; padding: 10px 0; font-size: 16px; text-align: center; width: 100%; font-family: @fontKaiti; font-weight: bold; box-sizing: border-box;}
          &>div{
            display: flex; text-align: center; margin: -1px -1px -1px -1px; box-sizing: border-box;
            em{ display: block; padding: 10px 0; text-align: center; width: 100%; }
            span{
              display:block; flex: 1; padding: 10px 0;  border:1px solid #000; border-bottom: none; margin: -1px 0 0 -1px; font-family: @fontKaiti; font-size: 16px; font-weight: bold;
              &:last-child{ border-right: none;}
            }
          }
        }
      }
      .fakeTableBody{
        margin: 1px -1px -1px 0;
        .fakeTableBodyN{
          display: flex; text-align: center; box-sizing: border-box;
          &>div{
            height: 40px; position: relative;
            em{
              display: block; padding: 10px 0; text-align: center; width: 100%; font-family: @fontKaiti; font-size: 16px; position: absolute; box-sizing: border-box;
              i{
                font-family: @fontKaiti; font-size: 16px; font-style: normal;
                font{ display: inline-block; width: 16px; height: 16px; border: 1px solid #000; vertical-align: middle; margin:-5px 60px 0 5px;}
                tt{ width:100px; border-bottom: 1px solid #000; height: 1px; display: inline-block; vertical-align: middle; margin: 10px 0 0 5px;}
              }
            }
            flex: 1;text-align: center; border: 1px solid #000; margin:-1px 0 0 -1px;
            div{
              display: flex; margin: 0 -1px 0 0; box-sizing: border-box;
              span{ display: block; flex: 1; padding: 10px 0; border:1px solid #000; border-bottom: none; margin: -1px 0 0 -1px; font-family: @fontKaiti; font-size: 16px; box-sizing: border-box;
                &:last-child{ border-right: none;}
              }
            }
            &:last-child{
              border-top: none; border-bottom:none;
            }
          }
        }
      }
    }
  }
  .invoiceBottom{
    padding: 10px 0;
    p{
      span{
        font-family: @fontKaiti; font-size: 18px; margin: 0 120px 0 0;
        &:last-child{margin: 0;}
      }
    }
  }

}


.printBox{
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: #FFF; z-index: 100;

  .bts{ text-align: center; padding: 20px 0; position: absolute; left: 0; top:auto; right: 0; bottom: 0; margin: auto; }
  .invoice{ margin:10px auto; position: relative;
    .close{ position: absolute; top:10px; right: 10px; cursor: pointer; display: none;}
    .close i{ color: #999; font-size: 35px;}
    &:hover{
      .close{ display: block;}
      }
  }
}

.tableStyle{
  border-collapse: collapse; border:none;
    th{border-collapse: collapse; border: 1px solid #ccd8e9; min-height: 40px; padding:10px; text-align: center; background: #eef3f9;}
    td{border-collapse: collapse; border: 1px solid #ccd8e9; min-height: 40px;padding:10px; text-align: center;}
}
.fileList{
  padding: 10px 0 0;
  ul{
      li{
           border: 1px solid #eaeaea; float: left; padding: 5px; margin: 0 10px 0 0;
          em{ float: left; width: 40px; height: 40px; line-height: 48px; overflow: hidden; background: #c3ddf9; text-align: center; margin: 0 5px 0 0;
              i{ font-size: 24px; color: #6a96ce;}
          }
          .set{
              float: right; margin: 0 0 0 5px;
              a{
                  float: left; width: 25px; height: 25px; line-height: 25px; overflow: hidden; text-align: center; margin: 8px 3px; border-radius: 50%;
                  i{ font-size: 14px;}
                  &.down{
                      background: #b8dafd; color: #6a96ce;
                      &:hover{ background: #409EFF; color: #FFF;}
                  }
                  &.drop{
                      background: #fbc4c4; color: #f56c6c;
                      &:hover{ background: #f56c6c; color: #FFF;}
                  }
              }
          }
          .mes{
              overflow: hidden;
              p{ margin: 0; line-height: 1.4em; font-size: 13px; height: 38px; overflow: hidden; max-width:150px;}
          }
      }
  }
}

.fuFont{ color:#F30!important;}
.selfButton{ display: inline-block; height:32px; line-height: 32px; background: #0096ff; color: #FFF; text-align: center; position: relative; border-radius: 3px; padding: 0 20px;
  input{ position: absolute; opacity: 0; left: 0; top: 0; right: 0; bottom: 0; margin: auto; cursor: pointer;}
  &:hover{ background: #66b1ff;}
 }


 .errorPageW{
   position: absolute;left: 0; top: 0; right: 0; bottom: 0; margin:auto;
   .errorPage{
     width: 818px; height: 595px; background: url(./../img/404.png) no-repeat scroll center center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin:auto;
     .bts{ position: absolute; bottom: 0; top: auto; left: 0; right: 0; text-align: center;}
    }
  }


  .baobiao{
     width: 100%; overflow: hidden; overflow-x:auto; padding: 1px 0 0; border-left: 1px solid #eaeaea;
    .baobiaoTop{
      font-size: 0; white-space: nowrap;
      div{
        background:#f5f5f5; display: inline-block; vertical-align: top; border: 1px solid #eaeaea; margin:-1px 0 0 -1px;
        span{ display: block; width: 120px; font-size: 14px; color:#333; text-align: center; height: 70px; line-height: 70px;}
      }
      &>div{
        display: inline-block;
         div{
           display: block;
          span{  height: 35px; line-height: 35px; display: inline-block;}
         }
      }
    }
    .baobiaoBody{
      font-size: 0; margin:-1px 0 0 0; white-space: nowrap;
      div{
        span{  text-align: center; font-size: 14px; width: 122px; height: 37px; line-height: 37px; float: left; border: 1px solid #eaeaea; margin:-1px 0 0 -1px; box-sizing: border-box;}
        p{float: left;}
      }
      .rightNR{
        white-space: normal;
        &>div{ white-space: nowrap; float: left;}
      }
      &>div{
        float: left;
        &>div{
          float: left;
          &>div{
            float: left;
              &>div{
                float: left;
              }
          }
        }
      }
      // .flbox{ float: left;}
      // .rightCon{overflow: hidden;}
    }
  }

  .summaryBox{
    background: #e0eeff; padding: 10px; margin: 10px 0 0;
    h3{
      display: inline-block;
    }
    p{
      display: inline-block; font-size: 14px; padding: 0 10px;
      b{ color: #F30;}
    }
  }
